// 类组件必须是大写开头的组件名
// 类组件应该继承React.Component父类，从而可以使用父类中提供的方法或属性
// 类组件必须提供render方法，并返回组件的结构
// class 组件名 extends React.Component{}

import React from 'react';
//通过解构的方式解构出来createRoot
import { createRoot } from 'react-dom/client';

class HandleHello extends React.Component {
  constructor() {
    super();
    //手动绑定this指向组件实例 call apply bind
    this.handleClick = this.handleClick.bind(this);
  }
  // 指向HandleHello
  handleClick() {
    console.log('handleClick----->', this);
  }
  // // 指向undefined
  // handleClick() {
  //   console.log('handleClick----->', this);
  // }

  // 指向组件实例对象
  handleClick2 = (id, msg) => {
    console.log('id,msg----->', id, msg);
    console.log('handleClick2----->', this);
  };

  render() {
    // 指向组件实例对象
    console.log('render----->', this);
    // 获取state状态数据
    return (
      <div>
        {/* 通过回调函数方式传递参数 */}
        <button onClick={this.handleClick}>点我</button>
        {/* 箭头函数传递参数 */}
        <button onClick={() => this.handleClick2(123, 'React!!!!')}>
          点我2
        </button>
        {/* <a onClick={this.handleClick} href="http://www.baidu.com">
          跳转百度
        </a> */}
      </div>
    );
  }
}

// 这是React18版本新出的挂载节点的方法
const root = createRoot(document.getElementById('root'));
root.render(<HandleHello></HandleHello>);
